<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.email" placeholder="邮箱/手机号"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" placeholder="数字/字符/特殊符号" type="password"></el-input>
    </el-form-item>
    <div style="text-align: center">
      <el-button type="primary" @click="LogIn" :loading="button_loading">登陆</el-button>
    </div>
    <a style="float: right" @click="gotoSecurity">找回密码</a>
  </el-form>
</template>
<script>
  import { UserLogin } from '@/public/api'

  export default {
    data () {
      return {
        button_loading: false,
        checked: false,
        formLabelWidth: '120px',
        form: {
          email: 'test1@qq.com',
          password: '123456'
        }
      }
    },
    methods: {
      Init () {
        this.button_loading = false
      },
      gotoSecurity () {
        this.$router.push({path: '/container/SecurityCenter'})
      },
      LogIn () {
        this.button_loading = true
        UserLogin({
          email: this.form.email,
          password: this.form.password
        }).then(
          data => {
            this.button_loading = false
            if (data.status) {
              this.$store.commit('getUser_id', data.user_id)
              console.log('1==========================1', data.user_id)
              localStorage.setItem('token', data.token)
              this.$emit('close')
              this.$message.success('登陆成功')
            }
            if (!data.status) {
              this.login_error = true
              this.$message.error('密码错误')
            }
          }
        ).catch(
          message => {
            console.log(message)
            this.button_loading = false
            this.login_error = true
            this.$message.error('服务器错误')
          }
        )
      }
    }
  }

</script>
<style>

</style>
